<template>
  <div class="wangwanglist">
    <div class="card">
      <div class="card_title">近30天本小组沟通趋势</div>
      <div class="chart">
        <v-chart :forceFit="true" :height="219" :data="data" :scale="scale" padding="auto">
          <v-tooltip/>
          <v-axis/>
          <v-stack-area
            position="logTime*num"
            color="l(90) 0:#4988f2 1:#ffffff"
            opacity="0.85"
            shape="smooth"
          ></v-stack-area>
        </v-chart>
      </div>
    </div>
    <div class="card" style="margin-top: 14px">
      <div class="flex row_bet">
        <div class="card_title">组员详情数据</div>
        <a-range-picker
          :ranges="{
            本周: [moment().subtract(parseInt(moment().format('d')) - 1, 'days'), moment()],
            上周: [
              moment().subtract(parseInt(moment().format('d')) + 6, 'days'),
              moment().subtract(parseInt(moment().format('d')), 'days')
            ],
            本月: [
              moment()
                .month(moment().month())
                .startOf('month'),
              moment()
                .month(moment().month())
                .endOf('month')
            ],
            上月: [
              moment(
                moment()
                  .subtract(1, 'month')
                  .format('YYYY-MM') + '-01'
              ),
              moment(
                moment()
                  .subtract(1, 'month')
                  .format('YYYY-MM') + '-01'
              )
                .subtract(-1, 'month')
                .add(-1, 'days')
            ],
            半年: [
              moment()
                .startOf('day')
                .subtract(6, 'month'),
              moment()
            ]
          }"
          v-model="timearr"
          format="YYYY-MM-DD"
          @change="timeChange"
          style="width:230px;"
        >
        </a-range-picker>
      </div>
      <div class="mainbox" v-show="isshow">
        <div class="ranklist flex row_left col_top">
          <div v-for="(v,k) in thlist" :key="k" class="rankli">
            <div class="user line-1">{{ v.user }}</div>
            <div
              class="total cursor"
              :style="{marginTop: '1px',color:v.isblack?'#101010':'#2396F9'}"
              @click="goinfo(v.user)">{{ v.total | numFormat }}
            </div>
            <div v-for="(v2,k2) in v.arr" :key="k2" class="rdata cursor" @click="goinfo2(v2,v.user)">
              {{ v2.num }}
            </div>
          </div>
        </div>
      </div>
      <div v-show="!isshow" v-loading="boxloading">
        <div style="margin-bottom: 8px;">
          <div>
            <a-button class="br4" @click="isshow=true">
              <a-icon type="left"/>
              返回列表
            </a-button>
          </div>
        </div>
        <a-table
          :columns="columns"
          :rowKey="grounddata => grounddata.itemId"
          :dataSource="grounddata"
          :loading="loading"
          :pagination="false"
        >
          <div slot="itemId" slot-scope="text, row">
            <div><a :href="'https://detail.tmall.com/item.htm?id='+row.itemId" target="_blank"> {{ row.title }}</a>
            </div>
          </div>
        </a-table>
      </div>
    </div>
  </div>
</template>
<script>
  import moment from 'moment'
  import { getteamoneinfo, getteamranklist, getwangwangList } from '@/api/rankApi'

  export default {
    name: 'Wangwanglist',
    data () {
      return {
        moment,
        data: [],
        timearr: [
          moment(moment().subtract(14, 'days')),
          moment()
        ],
        loading: false,
        isshow: true,
        boxloading: false,
        scale: [{
          dataKey: 'num',
          min: 0
        }, {
          dataKey: 'logTime',
          type: 'time',
          mask: 'YYYY-MM-DD'
        }],
        thlist: [
          // {
          //   total: 7740,
          //   user: '范雪琴',
          //   arr: [64, 187, 117, 63]
          // }
        ],
        grounddata: [
          // {
          //   user: '郑瑞瑞', // 用户名
          //   title: '黛丝恩Moist Diane日本植萃无硅油留香蓬松洗发水官方旗舰店官网', // 商品标题
          //   itemId: '564794140847', // 商品id
          //   nick: '黛丝恩旗舰店', // 店铺名称
          //   logTime: '2020-07-01 16:35:40', // 时间
          //   num: 4575 // 沟通次数
          // }
        ],
        columns: [
          {
            title: '用户名',
            align: 'center',
            dataIndex: 'user',
            scopedSlots: { customRender: 'user' }
          },
          {
            title: '商品',
            align: 'center',
            dataIndex: 'itemId',
            scopedSlots: { customRender: 'itemId' }
          },
          {
            title: '店铺',
            align: 'center',
            dataIndex: 'nick',
            scopedSlots: { customRender: 'nick' }
          },
          {
            title: '时间',
            align: 'center',
            dataIndex: 'logTime',
            scopedSlots: { customRender: 'logTime' }
          }, {
            title: '数量',
            align: 'center',
            dataIndex: 'num',
            scopedSlots: { customRender: 'num' }
          }
        ],
        user: null,
        start: moment(moment().subtract(14, 'days')).format('YYYY-MM-DD'),
        end: moment().format('YYYY-MM-DD')
      }
    },
    filters: {
      numFormat (input) {
        return input && input.toString()
          .replace(/(^|\s)\d+/g, (m) => m.replace(/(?=(?!\b)(\d{3})+$)/g, ','))
      }
    },
    computed: {},
    created () {
      this.getwangwangList()
      this.getteamranklist()
    },
    mounted () {
    },
    methods: {
      getteamoneinfo () {
        this.isshow = false
        this.boxloading = true
        getteamoneinfo({
          start: this.start,
          end: this.end,
          user: this.user
        }).then(res => {
          console.log(res)
          if (res.code === 200) {
            this.boxloading = false
            this.grounddata = res.data
          }
        }).catch(err => {
          console.log(err)
        })
      },
      goinfo (user) {
        console.log(user)
        if (user === '日期') {
          this.user = null
        } else {
          this.user = user
        }
        this.timearr[0] = moment(moment().subtract(14, 'days')).format('YYYY-MM-DD')
        this.timearr[1] = moment().format('YYYY-MM-DD')
        this.start = moment(moment().subtract(14, 'days')).format('YYYY-MM-DD')
        this.end = moment().format('YYYY-MM-DD')
        this.getteamoneinfo()
      },
      goinfo2 (row, user) {
        console.log(row, user)
        if (user === '日期') {
          this.user = null
          this.timearr[0] = row.num
          this.timearr[1] = row.num
          this.start = row.num
          this.end = row.num
        } else {
          this.user = user
          this.timearr[0] = moment(row.logTime)
          this.timearr[1] = moment(row.logTime)
          this.start = row.logTime
          this.end = row.logTime
        }
        this.getteamoneinfo()
      },
      gettotal (arr) {
        var s = 0
        for (var i = arr.length - 1; i >= 0; i--) {
          s += arr[i].num
        }
        return s
      },
      doformat (array) {
        const arr = []
        for (let i = 0; i < array.length; i++) {
          for (let j = 0; j < array[i].length; j++) {
            arr.push(array[i][j])
          }
        }
        // console.log(arr)
        // 提取同一个人的数据
        const arr2 = []
        for (let j = 0; j < array[0].length; j++) {
          const userarr = []
          for (let i = 0; i < arr.length; i++) {
            if (array[0][j].user === arr[i].user) {
              userarr.push(arr[i])
            }
          }
          arr2.push(userarr)
        }
        console.log('arr2', arr2)
        // 排序
        // const arr3 = arr2.sort(this.compare('logTime', true)) //小=>大
        // for (let i = 0; i < arr2.length; i++) { // 倒序
        //   arr2[i] = arr2[i].reverse()
        // }
        const arr3 = []
        const time = []
        for (let i = 0; i < arr2.length; i++) {
          const obj = {}
          obj.arr = []
          for (let j = 0; j < arr2[i].length; j++) {
            obj.user = arr2[i][j].user
            const job = {}
            job.num = arr2[i][j].num
            job.logTime = arr2[i][j].logTime
            obj.arr.push(job)
            if (i < 1) {
              const joo = {}
              joo.num = arr2[i][j].logTime
              time.push(joo)
            }
          }
          obj.total = this.gettotal(obj.arr)
          arr3.push(obj)
        }
        // console.log('arr3', arr3)
        // console.log('time', time)
        const bjo = {}
        bjo.user = '日期'
        bjo.arr = time
        bjo.total = '总计'
        bjo.isblack = true
        arr3.unshift(bjo)
        console.log(arr3)
        this.thlist = arr3
      },
      timeChange (dates, dateStrings) {
        // console.log('From: ', dates[0], ', to: ', dates[1])
        // console.log('From: ', dateStrings[0], ', to: ', dateStrings[1])
        // console.log(this.timearr)
        if (dates.length === 0) {
          this.start = null
          this.end = null
        } else {
          this.start = dateStrings[0]
          this.end = dateStrings[1]
          console.log(this.start, this.end)
        }
        if (this.isshow) {
          this.getteamranklist()
        } else {
          this.getteamoneinfo()
        }
      },
      getteamranklist () {
        getteamranklist({
          start: this.start,
          end: this.end
        }).then(res => {
          console.log(res)
          if (res.data.length > 0) {
            this.doformat(res.data)
          } else {
            this.$message.info('暂无数据!')
          }
        }).catch(err => {
          console.log(err)
        })
      },
      compare (prop, istime) {
        return function (obj1, obj2) {
          var val1 = obj1[prop]
          var val2 = obj2[prop]
          if (!isNaN(Number(val1)) && !isNaN(Number(val2))) {
            if (istime === true) {
              val1 = moment(val1).valueOf()
              val2 = moment(val2).valueOf()
            } else {
              val1 = Number(val1)
              val2 = Number(val2)
            }
          }

          if (val1 < val2) {
            return -1
          } else if (val1 > val2) {
            return 1
          } else {
            return 0
          }
        }
      },
      getwangwangList () {
        getwangwangList().then(res => {
          console.log(res)
          // res.data = [
          //   {
          //     logTime: '2020-09-08',
          //     num: 110
          //   }, {
          //     logTime: '2020-09-09',
          //     num: 199
          //   }, {
          //     logTime: '2020-09-10',
          //     num: 80
          //   }
          // ]
          this.data = res.data
        }).catch(err => {
          console.log(err)
        })
      },
      // 数组提取
      getArrayKey (array, key) {
        var resc = []
        if (array) {
          for (let i = 0; i < array.length; i++) {
            array[i].forEach(function (t) {
              resc.push(t[key])
            })
          }
        }
        // 使用: this.getArrayKey(array, "key");
        return resc
      }
    }
  }
</script>
<style lang='less' scoped>
  .wangwanglist {
    .card {
      padding: 14px 36px 26px 26px;

      .card_title {
        margin-bottom: 23px;
      }

      .chart {
        width: 100%;
        height: 219px;
      }
    }

    .mainbox {
      /*background-color: #F8F8F9 !important;*/
      /*border-radius: 8px 8px 0px 0px;*/
      /*border-top-left-radius: 0px !important;*/

      .ranklist {
        border-radius: 8px;
        overflow-y: hidden;

        .rankli {
          text-align: center;
          flex: 1;

          .user {
            height: 44px;
            line-height: 44px;
            background-color: #F8F8F9;
            padding: 0 18px;
            color: #101010;
            font-weight: 600;
          }

          .total {
            height: 40px;
            line-height: 40px;
            background-color: #F8F8F9;
            color: #2396F9;
            padding: 0 18px;
          }

          .rdata {
            height: 33px;
            line-height: 33px;
            padding: 0 18px;
            color: #2396F9;
            border-bottom: 1px solid #F8F8F9;
          }
        }
      }

    }
  }
</style>
